<template>
	<div id="AddCardCert">

		<div id="step-one" v-show="stepOne">
			<x-header :left-options="{showBack: false}" title="添加银行卡" class="header vux-1px-b">
				<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="title">
				<p>请绑定持卡人本人的银行卡</p>
			</div>
			<div class="manage-list">
				<ul>
					<li class="vux-1px-b">
						<span>持卡人</span>
						<input type="text" placeholder="请输入持卡人姓名" v-model="identify_name" />
						<img src="../assets/images/home/icon_explain.png" alt="" />
					</li>
					<li>
						<span>卡号</span>
						<input v-model="cert_numbers" type="text" onkeyup="this.value =this.value.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');" placeholder="请输入银行卡号" />
					</li>
				</ul>
			</div>
			<button @click="getBankType">下一步</button>
			<p class="explain">支持银行及限额说明</p>
		</div>
		<div id="step-two" v-show="stepTwo">
			<x-header :left-options="{showBack: false}" title="添加银行卡" class="header vux-1px-b">
				<a slot="left" @click="back2()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="manage-list">
				<ul class="step-two">
					<li>
						<span>卡类型</span>
						<p v-model="cert_type">{{cert_type}}</p>
					</li>
				</ul>
			</div>
			<div class="manage-list">
				<ul class="step-two">
					<li>
						<span>手机号</span>
						<input type="number" placeholder="请输入银行预留手机号" v-model="cert_tel" />
					</li>
				</ul>
			</div>
			<button @click="submitTel">下一步</button>
			<p class="explain">账户安全保障中</p>
		</div>
		<div id="step-three" v-show="stepThree">
			<x-header :left-options="{showBack: false}" title="添加银行卡" class="header vux-1px-b">
				<a slot="left" @click="back3()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="cert-news">
				本次操作需要短信验证，请输入156******70收到的短信验证码
			</div>
			<div class="manage-list">
				<ul>
					<li class="step-two">
						<span>验证码</span>
						<input type="text" v-model="sms_code" placeholder="填写验证码" />
						<b class="vux-1px-l" @click="verify">{{btntxt}}</b>
					</li>
				</ul>
			</div>
			<button @click="submitCode">下一步</button>
		</div>
		<toast v-model="success" type="text" width='5rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { bankCardAttribution } from '../assets/js/bank.js'
	import { XHeader, Toast } from 'vux'
	export default {
		data() {
			return {
				stepOne: true,
				stepTwo: false,
				stepThree: false,
				cert_numbers: '',
				identify_name: '',
				cert_type: '',
				success: false,
				msg: '',
				cert_tel: '',
				times: 0,
				btntxt: "获取验证码",
				sms_code: ''
			}
		},
		components: {
			XHeader,
			Toast
		},
		mounted() {},
		methods: {
			getBankType: function() {
				var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
				if(this.identify_name == '') {
					this.success = !this.success;
					this.msg = '请输入持卡人姓名'
				} else if(this.cert_numbers == '') {
					this.success = !this.success;
					this.msg = '请输入银行卡号'
				} else if(strBin.indexOf(this.cert_numbers.substring(0, 2)) == -1) {
					this.success = !this.success;
					this.msg = '银行卡号开头6位不符合规范'
				} else {
					//6217001210024455220  建行
					//6210812430012666356 建行
					this.cert_type = bankCardAttribution(this.cert_numbers).bankName + bankCardAttribution(this.cert_numbers).cardTypeName
					console.log(bankCardAttribution(this.cert_numbers));
					this.stepOne = !this.stepOne;
					this.stepTwo = !this.stepTwo;
				}
			},
			submitTel: function() {
				var reg1 = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(this.cert_tel == '') {
					this.success = !this.success;
					this.msg = '请输入银行预留手机号'
				} else if(!reg1.test(this.cert_tel)) {
					this.success = !this.success;
					this.msg = '请输入正确手机号'
				} else {
					this.stepTwo = !this.stepTwo;
					this.stepThree = !this.stepThree;
				}
			},
			//手机验证码部分
			timer: function() {
				if(this.times > 0) {
					this.times--;
					this.btntxt = this.times + "s后重新获取";
					setTimeout(this.timer, 1000);
				} else {
					this.times = 0;
					this.btntxt = "点击获取";
				}
			},
			verify: function() {
				if(this.times > 0) {
					return
				} else {
					this.times = 60;
					this.timer();
					let params = {
						tel: this.cert_tel
					};
					this.$http({
						method: 'POST',
						url: '/los/api/member/sms_verify.json',
						data: params
					}).then((result) => {
						this.success = !this.success;
						this.msg = result.data.msg;
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			submitCode: function() {
				if(this.sms_code == '') {
					this.success = !this.success;
					this.msg = '验证码不为空'
				} else {
					this.$http({
						method: 'POST',
						url: '',
						data: params
					}).then((result) => {}).catch((err) => {
						console.log(err);
					})
				}
			},
			back: function() {
				window.history.go(-1);
			},
			back2: function() {
				this.stepTwo = false;
				this.stepThree = false;
				this.stepOne = true;
			},
			back3: function() {
				this.stepTwo = true;
				this.stepThree = false;
				this.stepOne = false;
			},
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.title p {
		height: 1.04rem;
		line-height: 1.04rem;
		font-size: 0.37rem;
		color: #777;
		padding: 0 0.26rem;
	}
	
	.manage-list ul {
		background: #fff;
	}
	
	.manage-list ul li {
		height: 1.3rem;
		line-height: 1.3rem;
		padding: 0 0.26rem;
		overflow: hidden;
	}
	
	.manage-list ul li span {
		height: 100%;
		font-size: 0.4rem;
		color: #333;
		display: inline-block;
		width: 2.58rem;
	}
	
	.manage-list ul li input {
		height: 100%;
		line-height: 100%;
	}
	
	.manage-list ul li img {
		float: right;
		width: 0.32rem;
		height: 0.32rem;
		margin-top: 0.42rem;
	}
	
	button {
		width: 9.2rem;
		margin-left: 0.4rem;
		height: 1.3rem;
		background: #ffb2b2;
		border: none;
		color: #fff;
		font-size: 0.4rem;
		margin-top: 0.61rem;
		border-radius: 0.05rem;
	}
	
	.explain {
		margin-top: 0.4rem;
		color: #627dc9;
		font-size: 0.32rem;
		width: 100%;
		text-align: center;
	}
	
	.step-two {
		margin-top: 0.26rem;
	}
	
	.step-two p {
		width: 72%;
		float: right;
		font-size: 0.37rem;
		color: #777;
	}
	
	.step-two b {
		float: right;
		font-size: 0.37rem;
		color: #777;
		font-weight: normal;
		height: 0.34rem;
		line-height: 0.34rem;
		margin: 0.48rem 0;
		padding-left: 0.26rem;
	}
	
	#step-three .cert-news {
		width: 100%;
		height: 2.53rem;
		padding: 0.7rem 2.41rem 0.81rem 2.37rem;
		background: #fff;
		font-size: 0.37rem;
		color: #777;
		line-height: 0.56rem;
	}
</style>